<template>
    <div class="cityselect">
        <div class="top">
            <div class="container">
                <div>
                    <el-row>
                        <el-col :span="10">
                            <font @click="$router.push('/newaddress')"><</font>
                        </el-col>
                        <el-col :span="14">
                            <font>城市选择</font>
                        </el-col>
                    </el-row>
                </div>
                <input v-model="cityinput" @input="city_input" type="text" placeholder="请输入城市名">
            </div>
        </div>
        <div v-show="isshow">
            <div class="container">
                <font>
                    当前定位城市
                </font>
            </div>
            <div class="list">
                <div class="td" v-show="this.$store.state.city">
                    {{this.$store.state.city}}
                </div>
                <div class="td" v-show="!this.$store.state.city">
                    请选择
                </div>
            </div>
            <div v-for="item,index in this.citylist">
                <div class="container">
                    {{item.province_name}}
                </div>
                <div class="list" v-for="city,index in item.cities">
                    <div @click="citylistclick(city.city_name)" class="td">
                        {{city.city_name}}
                    </div>
                </div>
            </div>
        </div>
        <div v-show="!isshow" style="height:100%;background: white;width: 100%;">
            <div v-show="city.length==0" style="color:gainsboro;display:flex;justify-content:space-around;align-items: center;">
                无结果
            </div>
            <div>
                <div v-show="city.length!=0"  v-for="item,index in this.city">
                    <div class="container">
                        {{item.province_name}}
                    </div>
                    <div class="list" v-for="city,index in item.cities">
                        <div @click="citylistclick(city.city_name)" class="td">
                            {{city.city_name}}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import {mapMutations} from 'vuex';
    export default {
        name: "cityselect",
        data(){
            return{
                city:[],
                cityinput:'',
                isshow:true,
                citylist:this.$store.state.citylist,
            }
        },
        methods:{
            ...mapMutations(['setcity',"setschoollist","setprovince"]),
            city_input(){
                this.city=[]
                var reg=new RegExp(this.cityinput);
                if(!this.cityinput){
                    this.noshow()
                }else{
                    for(var i=0;i<this.citylist.length;i++){
                        if(reg.test(this.citylist[i].province_name)){
                            this.city.push(this.citylist[i]);
                            this.isshow=false;
                        }else{
                            for(var x=0;x<this.citylist[i].cities.length;x++){
                                if(reg.test(this.citylist[i].cities[x].city_name)){
                                    var city={
                                        "province_name": this.citylist[i].province_name,
                                        "cities": [{
                                            "city_name":this.citylist[i].cities[x].city_name,
                                            "universities": this.citylist[i].cities[x].universities
                                        }]}

                                    this.city.push(city);
                                    this.isshow=false;
                                }
                            }
                        }
                    }

                }
            },
            noshow(){
                this.isshow=true
            },
            citylistclick(e){
                for(var i=0;i<this.$store.state.citylist.length;i++){
                    for(var x=0;x<this.$store.state.citylist[i].cities.length;x++){
                        if(e==this.$store.state.citylist[i].cities[x].city_name){
                            //发送设置请求
                            var province=this.$store.state.citylist[i].province_name;
                            var city=this.$store.state.citylist[i].cities[x].city_name;
                            var schoollist=this.$store.state.citylist[i].cities[x].universities;
                            this.axios.post('http://127.0.0.1:3000/city',{phone:this.$store.state.phone,province:this.$store.state.citylist[i].province_name,city:e})
                                .then((res)=>{
                                    if(res.data.msg==200){
                                        this.$store.commit('setcity',e);
                                        this.$store.commit('setprovince',province);
                                        this.$store.commit('setschoollist',schoollist);
                                        this.$store.commit('setcity',city);
                                        this.isshow=true;
                                        this.cityinput='';
                                        this.$router.push('/newaddress')
                                    }else{
                                        alert('未知原因，设置失败')
                                    }
                                })
                                .catch((err)=>{
                                    console.log(err)
                                    alert('未知原因，设置失败')
                                })

                        }
                    }

                }

            }
        }
    }
</script>

<style scoped>
    .cityselect{
        position: absolute;
        top: 0;
        height: 100%;
        width: 100%;
        overflow: auto;
        background: rgb(245,245,245);
    }
    .top{
        background: rgb(0,162,255);
        color: white;
    }
    .container{
        width: 90%;
        margin: auto;
        padding: 10px;
        font-size: 18px;
    }
    .container input{
        margin-top:10px;
        width: 100%;
        height: 30px;
        border-radius: 25px;
        outline: none;
        border: none;
        text-indent: 1rem;
    }
    .td{
        width: 80%;
        margin: auto;
        padding: 10px;
        font-size: 18px;
        border-bottom: 1px solid gainsboro;
    }
    .list{
        background: white;
        font-size: 18px;
    }
</style>